<template>
  <div class="home">
    <div class="content">
      <!-- .box$*8{$} -->
      <div class="box1"><h2>大屏数据可视化</h2></div>
      <div class="box2">
        <dv-border-box-1>
          <h3>环形图</h3>
          <dv-active-ring-chart
            :config="config"
            style="width: 100%; height: 100%;"
          />
        </dv-border-box-1>
      </div>
      <div class="box3">
        <ve-pie  style="width: 100%; height: 100%;" :data="chartData" height="100%"  :extend="pieExtend"></ve-pie>
      </div>
      <div class="box4" style="background-color: rgb(35, 18, 145)"></div>
      <div class="box5" style="background-color: rgb(233, 3, 34)"></div>
      <div class="box6" style="background-color: rgb(233, 156, 3)"></div>
      <div class="box7" style="background-color: rgb(3, 179, 233)"></div>
      <div class="box8">
        <dv-border-box-11 title="1111-表格"></dv-border-box-11>
      </div>
      <div class="box9" style="background-color: rgb(245, 23, 156)"></div>
    </div>
  </div>
</template>

<script>
import { create } from 'sortablejs';

// @ is an alias to /src

export default {
  name: "HomeView",
  data() {
    return {
      config: {
        data: [
          {
            name: "周口",
            value: 55,
          },
          {
            name: "南阳",
            value: 120,
          },
          {
            name: "西峡",
            value: 78,
          },
          {
            name: "驻马店",
            value: 66,
          },
          {
            name: "新乡",
            value: 80,
          },
        ],
        lineWidth: 10,
        digitalFlopStyle: {
          fontSize: 16,
          fill: '#fff'
        }
      },

      chartData: {
        columns: ['date', 'PV'],
        rows: [
          { 'date': '01-01', 'PV': 1231 },
          { 'date': '01-02', 'PV': 1223 },
          { 'date': '01-03', 'PV': 2123 },
          { 'date': '01-04', 'PV': 4123 },
          { 'date': '01-05', 'PV': 3123 },
          { 'date': '01-06', 'PV': 7123 }
        ]
      },
      pieExtend:{ // 基于echarts的配置
        series: {
            // 设置饼状图
            type: "pie",
            radius: ["0%", "55%"], // 设置半径 [内圈半径，外圈半径]
            center: ["50%", "60%"], // 设置圆心坐标
            // legend.textStyle. fontStyle
            label:{
              color:'#fff'
            }
        
        },
        legend:{ // legend专门为各个标题的配置
            textStyle:{
              color:'#fff'
            }
        } 
      }
    };
  },

  components: {},
};
</script>
<style lang="less" scoped>
.home {
  width: 100%;
  height: 100%;

  .content {
    width: 100%;
    height: 100%;
    // background: bisque;
    display: grid;
    // 设置列数,(多少列,每一列占的分数)
    grid-template-columns: repeat(3, 1fr);
    // 这种写法每行的高度都一样
    // grid-template-rows: repeat(3, 1fr);
    // 50px(第一行的高度),1fr表示平均分, 有多少个参数就代表多少行
    grid-template-rows: 50px 1fr 1fr 1fr;
    // 网格间隙
    gap: 10px;
    .box1 {
      grid-column: span 3;
      text-align: center;
      line-height: 50px;
      color: #fff;
      font-weight: bold;
    }
    .box8 {
      // 合并列
      grid-column: span 2;
    }

    h3 {
      position: absolute;
      font-weight: bold;
      color: #fff;
      left: 50%;
      transform: translate(-50%, 0);
    }
  }
}
</style>
